<template>
  <div style="height:100px">我是顶部的大轮播</div>
  <ul class="top-card">
    <router-link custom to="/films/nowplaying"  v-slot="{isActive,navigate }">
      <li  @click="navigate">
        <span :class="isActive ? 's-select' : '' ">正在热映</span>
      </li>
    </router-link>
    <router-link custom to="/films/comingsoon"  v-slot="{isActive,navigate }">
      <li  @click="navigate">
        <span :class="isActive ? 's-select' : '' ">即将上映</span>
      </li>
    </router-link>
  </ul>

<!--  子路由视图-->
  <router-view></router-view>
</template>

<script setup>


</script>

<style scoped lang="scss">
.top-card{
  display: flex;
  li{
    flex: 1;
    text-align: center;
    line-height: 50px;
  }
  .s-select{
    border-bottom: 1px solid #f6574a;
    color:#f6574a;
  }
}
</style>
